<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>用户</title>
</head>
<body>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/sockjs-client/1.1.1/sockjs.js"></script>
<script type="text/javascript">
    var websocket = null;
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://" + location.host + "/websocket/socketServer.do");
    }
    else if ('MozWebSocket' in window) {
        websocket = new MozWebSocket("ws://" + location.host + "/websocket/socketServer.do");
    }
    else {
        websocket = new SockJS("http://" + location.host + "/sockjs/socketServer.do");
    }
    websocket.onopen = onOpen;
    websocket.onmessage = onMessage;
    websocket.onerror = onError;
    websocket.onclose = onClose;

    function onOpen(openEvt) {
        //alert(openEvt.Data);
        websocket.send("getAllEquipments");
    }

    function onMessage(evt) {
        // console.log(evt.data);
        $("#newMsg").append($("<p>"+evt.data+"</p>"));
    }

    function onError() {
    }

    function onClose() {
    }

    function doSend() {
        if (websocket.readyState == websocket.OPEN) {
            var msg = document.getElementById("inputMsg").value;
            websocket.send(msg);//调用后台handleTextMessage方法
            console.log("发送成功!");
        } else {
            console.log("连接失败!");
        }
    }

    function doSendBySelect(e) {
        if (websocket.readyState == websocket.OPEN) {
            var msg = $(e.target).parent().siblings(".actionTD").find("#action").val();
            if (msg == "") {
                alert("请选择操作")
                return
            }
            console.log($(e.target).parent().siblings(".equipmentName").find("input"));
            var equipmentNameVal=$(e.target).parent().siblings(".equipmentName").find("input").val();//设备名
            if(equipmentNameVal==""){
                alert("请输入设备名")
                return
            }else if(equipmentNameVal.slice(0,9)!="equipment"){
                alert("设备名的开头必须是'equipment***',例如'equipment01'")
                return
            }else{
                msg = equipmentNameVal+":" + msg;
                websocket.send(msg);//调用后台handleTextMessage方法
                console.log("发送成功!");
            }

        } else {
            console.log("连接失败!");
        }
    }

    window.close = function () {
        websocket.onclose();
    }

    setInterval(function () {
        if (websocket.readyState == websocket.OPEN) {
            websocket.send("getAllEquipments");
        } else {
            console.log("连接失败!");
        }
    }, 5000)//定时 获取所有设备
</script>
<%--请输入：<textarea rows="5" cols="10" id="inputMsg" name="inputMsg"></textarea>--%>
<%--<button onclick="doSend();">发送</button>--%>
<table border="1" cellpadding="1">
    <tr>
        <td>设备</td>
        <td>操作</td>
        <td>执行命令</td>
    </tr>
    <tr>
        <td class="equipmentName"><input type="text" value="equipment01"></td>
        <td class="actionTD">
            <select name="action" id="action">
                <option value="">选择操作</option>
                <option value="start">启动</option>
                <option value="stop">暂停</option>
                <option value="close">关闭</option>
            </select>
        </td>
        <td>
            <button onclick="doSendBySelect(event);">发送</button>
        </td>
    </tr>
    <tr>
        <td class="equipmentName"><input type="text" value="equipment02"></td>
        <td class="actionTD">
            <select name="action" id="action">
                <option value="">选择操作</option>
                <option value="start">启动</option>
                <option value="stop">暂停</option>
                <option value="close">关闭</option>
            </select>
        </td>
        <td>
            <button onclick="doSendBySelect(event);">发送</button>
        </td>
    </tr>
</table>
<div id="newMsg"></div>

</body>
</html>